<!--  -->
<template>
  <div>
    <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
    :before-close="handleClose"
  >
  {{ props.model }}
   
  <el-form
    ref="ruleFormRef"
    :model="data"
    label-width="auto"
    class="ruleForm"
  >
    <el-form-item label="  姓名" prop="name">
      <el-input v-model="data.name"  placeholder="请输入姓名"  />
    </el-form-item>
    <el-form-item label="电话" prop="name">
      <el-input v-model="data.mobile"  placeholder="请输入电话"  />
    </el-form-item>
    <el-form-item label="老人性别" prop="gender">
        <el-select v-model="data.gender" placeholder="请选择性别">
        <el-option label="男" value="1" />
        <el-option label="女" value="0" />
      </el-select>
    </el-form-item>

     
    <!-- <el-form-item>
      <el-button type="primary" @click="submit()">提交</el-button>
    </el-form-item> -->
  </el-form>


    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">Cancel</el-button>
        <el-button type="primary" @click="submit">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<script lang='ts' setup>
import { reactive,toRefs,ref,defineEmits, toRaw,defineProps,onMounted} from 'vue'

const props=defineProps(["model"]);
const emits=defineEmits(["close","add"])

const data=reactive( {
               
               name: "",
               mobile: "",
               idCard: "",
               relation: "",
               gender:null,
               address: ""
           })
           onMounted (()=>{
              Object.assign(data,props.model)
           })
 
const dialogVisible = ref(true)

const handleClose=()=>{

    emits("close");

}

const submit=()=>{
    
    emits("add",toRaw(data));

}
</script>
<style scoped>
</style>